<template>
<transition name="fade-scale" appear>
  <div class="scene" v-show="show">
    <div class="rocket" :class="{ destroy: isdestroy }">
      <img src="@/assets/img/loading/rocket.png" alt="" draggable="false" />
      <span>Loading...</span>
    </div>
  </div>
</transition>
</template>
 
<script>
export default {
  name: "loading",
  data() {
    return {
      isdestroy: false,
      show:false,
    };
  },
  beforeDestroy() {
    this.isdestroy = true;
  },
};
</script>


<style scoped>
.scene {
  position: absolute;
  top: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  z-index: 1501;
}

.scene .rocket {
  position: fixed;
  top: calc(calc(100vh / 2) - 150px);
  width: 150px;
  animation: animate 0.2s ease infinite;
  transition: all .3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.rocket span{
  color: white;
}
.destroy {
  top:0px !important;
}
.rocket img {
  width: 100%;
}
@keyframes animate {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(2px);
  }
}
.scene .rocket::before {
  content: "";
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 200px;
  background: linear-gradient(#00d0ff, transparent);
  filter: blur(10px);
}
</style>